<!--
 * @Author: your name
 * @Date: 2021-05-12 10:15:09
 * @LastEditTime: 2021-05-13 10:07:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\system\accountAndNational\accountAndNational.vue
-->
<template>
    <div class="accountAndNational-main-box">
        <div class="search-box">
            <div class="search-box-sub">
              <span class="lable-text">{{$t('devWifi.loginName')}}</span>
              <el-input style="width:160px;" v-model="loginName" :placeholder="$t('common.info.pl-insert-content')"></el-input>
            </div>
            <div class="search-box-sub">
              <el-button type="primary" @click='query' >{{$t('query')}}</el-button>
            </div>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe   :column='column' :select='false'>
            <template #option="{data}">
                <div class="option-box">
                    <el-button size='small' type="success" icon="el-icon-thumb"     @click='showDrawer(data)'></el-button>
                </div>                    
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <el-drawer
        :title="$t('m_1392323795301355521')"
        :visible.sync="drawer"
        :with-header="false"
        size='300px'
        :wrapperClosable='false'
        >
            <h3 class='text-center'>{{$t('m_1392323795301355521')}}</h3>
            <hr>
            <drawer  v-if='drawer' :editData='editData' @closeDrawer='drawer = false'></drawer>
        </el-drawer>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
import drawer from './drawer'
export default {
    components: {
        baseTable,
        drawer
    },
    props: {

    },
    data() {
        return {
            drawer:false,
            loading:false,
            loginName:'',
            editData:'',
            dataRows:[],
            column:[{
                title: this.$t('user.loginName'),
                value: 'loginName',
            },{
                title: this.$t('warrantyManage.userName'),
                value: 'userName',
            },{
                title: this.$t('control'),
                value: 'sid',
                slot: 'option'
            },],
            size:10,
            current:1,
            total:1,
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.userGetAllManufacturers()
    },
    methods: {
        async userGetAllManufacturers(){
            this.loading = true
            let res = await this.API.userGetAllManufacturers({
                size:this.size,
                current:this.current,
                loginName:this.loginName,
            })
            this.loading = false
            this.total = res.total
            this.dataRows = res.rows
        },
        query(){
            this.current = 1
            this.userGetAllManufacturers()
        },
        showDrawer(data){
            this.editData = data
            this.drawer = true
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.userGetAllManufacturers()
        },
        handleCurrentChange(val) {
          this.current = val
          this.userGetAllManufacturers()
        },
    },
};
</script>

<style  lang="less" scoped>
.accountAndNational-main-box{
    .text-center{
        color: #a1a1a1;
    }
}
</style>
